const colorList = ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348', '#90ed7d']

export default {
  components: {},
  props: {
    lineWidth: {
      type: Number,
      default: 1200
    },
    lineHeight: {
      type: Number,
      default: 400
    },
    xData: {
      type: Array,
      default: []
    },
    yData: {
      type: Array
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  // 在实例创建完成后被立即调用
  created() {
  },
  // 实例被挂在后调用
  mounted() {
    this.init()
  },
  // 方法
  methods: {
    init() {
      this.chartInstance = this.$echarts.init(this.$refs.echartsRef)

      let series = this.initSeriesData()
      let legend = this.initLegendData()

      let option = {
        // 图表X轴
        xAxis: {
          type: 'category', // 类目轴
          data: this.xData
        },
        // 图表Y轴
        yAxis: [
          {
            type: 'value' // 数值轴
          }, {
            type: 'value'
          }
        ],
        // 提示工具
        tooltip: {
          trigger: 'axis' // 触发类型
        },
        // 系列
        series: series,
        legend: {
          x: 'center',
          y: 'bottom',
          data: legend
        }
      }
      this.chartInstance.setOption(option)
    },
    // 初始化展示数据(series)
    initSeriesData() {
      let newSeries = []
      this.yData.forEach((item, index) => {
        console.log(index)
        newSeries.push({
          type: 'line',
          name: item.name,
          data: item.data,
          barWidth: '20%',
          yAxisIndex: index % 2,
          itemStyle: {
            color: colorList[index]
          },
          markPoint: {
            data: [{
              type: 'max',
              name: '最大值'
            }, {
              type: 'min',
              name: '最小值'
            }]
          },
          markLine: {
            data: [{
              type: 'average',
              name: '平均值'
            }]
          }
        })
      })
      return newSeries
    },
    // 初始化legend数据
    initLegendData() {
      let newLegend = []
      this.yData.forEach((item, index) => {
        newLegend.push(item.name)
      })
      return newLegend
    }
  }
}
